<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
    #editor { 
       width: 100%;
       height: 100vh;
    }
    .test {
    	height: 100vh;
    	overflow: scroll;
    	overflow-x: hidden;
    }
</style>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div  class="col-md-3 test" >
	<h4>Parts of this Lesson</h4>
	<ul class="nav nav-pills nav-stacked" id="lessonParts">
	  
	  <?php
	  	foreach($lesson_parts as $part)
	  	{?>
	  		<li role="presentation">
	  			<a href="<?php echo '#'.$part->file_name; ?>"><?php echo $part->name; ?>
	  			</a>
	  			<input type="hidden" class="file_name" value="<?php echo $part->file_name; ?>">
	  			<input type="hidden" class="part_id" value="<?php echo $part->id; ?>">
	  		</li>

	  	<?php }
	  ?>
	</ul>

	<h4>Settings for Current Part</h4>
	<form>
	
	  <div class="form-group">
	    <label for="partName">Part Name</label>
	    <input type="text" class="form-control" id="partName" placeholder="Name" value="<?php echo $lesson_parts[0]->name; ?>">
	  </div>
	  <div class="form-group">
	    <label for="youtubeLink">Youtube Video Info</label>
	    <input type="text" class="form-control" id="youtubeLink" placeholder="Link" value="<?php echo $lesson_parts[0]->youtube_link;?>">
	  </div>
	  <div class="form-group">
	    <input type="text" class="form-control" id="startTime" placeholder="Start Time in Seconds" value="<?php echo $lesson_parts[0]->youtube_start;?>">
	  </div>
	  <div class="form-group">
	    <input type="text" class="form-control" id="endTime" placeholder="End Time in Seconds" value="<?php echo $lesson_parts[0]->youtube_end;?>">
	  </div>
	 
	  <button type="submit" class="btn btn-default" onclick="savePartInfo()">Submit</button>
	</form>

</div>
<div class="col-md-3">
	<iframe id="lessonPartsFrame"  frameborder="0" style="width: 100%; height: 75vh;" src="<?php echo '../get_lesson_part/'.$lesson->id.'/'.$lesson_parts[0]->file_name; ?>" seamless>

     </iframe>
</div>

<div class="col-md-6">
	<div id="editor"></div>
	<div style="position: absolute; bottom: 7px; z-index: 5; left: 25px;">
	<button type="button" class="btn btn-success" aria-label="Left Align" onclick="saveCurrentFile()">
 			<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
  			Save
		</button>
	</div>
</div>
<div class="col-md-3">

</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js">
	</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../../../ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/codealong/js/editLesson.js"> </script>

<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/php");
    editor.setValue(<?php echo json_encode($first_part_code); ?>);
    var currentPart = 0;
    var lesson_parts = <?php echo json_encode($lesson_parts); ?>;
    var lesson = <?php echo json_encode($lesson->id); ?>;
    var part_id = <?php echo json_encode($lesson_parts[0]->id); ?>;
    $(document).ready()
    {
    	$('#lessonParts a:first').tab('show');
    	$('#lessonParts li').click(function (e) {
			$(this).tab('show');
			var part_file = $(this).find('.file_name')[0].value;
			part_id = $(this).find('.part_id')[0].value;
    		changePart(part_file);
			
		});

    }
</script>

</body>
</html>